<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                Document
            </title>
            <script src="jquery.js">
            </script>
            <script src="template.js">
            </script>
            <script id="stu" type="text/html">
                {{each student as value}}
		<tr>
			<td>{{value.id}}</td>
			<td>{{value.name}}</td>
			<td>{{value.age}}</td>
			<td>{{value.gender}}</td>
		</tr>
	{{/each}}
            </script>
        </meta>
    </head>
    <body>
        <div id="container">
            <table align="center" border="2" cellpadding="2" width="400px">
                <tr>
                    <th>
                        学号
                    </th>
                    <th>
                        姓名
                    </th>
                    <th>
                        年龄
                    </th>
                    <th>
                        性别
                    </th>
                </tr>
                <tbody id="tbody">
                </tbody>
            </table>
        </div>
        <script>
            $(function(){
			var students = {
				student:[
					{id:"0001",name:"张三",age:"20",gender:"男"},
					{id:"0002",name:"李四",age:"21",gender:"女"},
					{id:"0003",name:"王五",age:"22",gender:"男"}
				]
			}
			var html =template('stu',students);
			$("#tbody").html(html);
		});
        </script>
    </body>
</html>
